 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>帮主详情</title>
	<link rel="stylesheet" type="text/css" href="../../../css/aui.css">
	<style type="text/css">
	body {
		background: #f4f4f4; height: auto; padding-bottom: 15px;
	}
	.bar-bgcolor {
		position: fixed;
		top: 0;
        background: rgba(255,255,255,0);
        color: #ffffff;
	}
	.small-avatar {
		position: relative;
	}
	.small-avatar .avatar{
		opacity: 0;
		position: absolute;
		left: 40px;
		width: 30px;
		border: 1px solid #fff;
	}
	.small-avatar .avatar.show {
		-webkit-animation: showIn .8s ease both;
                animation: showIn .8s ease both;
	}
	.small-avatar .avatar.hide {
		-webkit-animation: hideIn .8s ease both;
                animation: hideIn .8s ease both;
	}
	#aui-header.white {
		background: #3bafda;
        opacity: 0.1;
        -webkit-animation: fadeIn .8s ease both;
                animation: fadeIn .8s ease both;
	}
	#aui-header.nowhite {
		background: rgba(62,100,145,0);
        -webkit-animation: fadeOut .8s ease both;
                animation: fadeOut .8s ease both;
	}
	@-webkit-keyframes bodyFadeIn {
        from { opacity: 0}
        to { opacity: 1}
    }
	@-webkit-keyframes fadeIn {
        from { background: rgba(62,100,145,0);}
        to { background: #3bafda;}
    }
    @-webkit-keyframes fadeOut {
    	from { background: #3bafda;}
        to { background: rgba(62,100,145,0);}
        
    }
    @-webkit-keyframes showIn {
        0% { opacity: 0;top: -20px;}
        30% { opacity: 0;top: -20px;}
        100% { opacity: 1;top: 8px;}
    }
    @-webkit-keyframes hideIn {
        0% { opacity: 1;top: 8px;}
        70% { opacity: 0;top: -20px;}
        100% { opacity: 0;top: -20px;}
    }
    
    .aui-content { background: #ffffff; margin-bottom: 10px;}
    .aui-content.image { margin-bottom: 0; position: relative; height: 220px; padding-top: 45px; }
    .image img { 
    	width: 100%;
   	}
    img.avatar {
    	position: absolute;
    	width: 25%;
    	height: auto;
    	left: 50%;
    	top: 25%;
    	margin-left: -12.5%;
    	border-radius: 50%;
    	border: 2px solid #ffffff;
   	}
   	.helper-name {
   		width: 100%;
   		text-align: center;
   		font-size: 1.2em;
   		color: #fff;
   		position: absolute;
   		bottom:30px;
   	}
    .helper-info {
    	width: 100%;
    	color: #666;
    	font-size: 14px;
    	padding: 5px 0;
    	overflow: hidden;
    	text-align: center;
    }
    .helper-info p {
    	margin-bottom: 5px;
    }
    .helper-tag { 
		color: #ff9900;
    }
    .wantmeet, .wantmeet .aui-iconfont, p.helper-info span.aui-iconfont{
    	color: #999;
    }
    .helper-otherinfo { margin-bottom: 10px; overflow: hidden;}
    
    
    .aui-card { border:none;}
    .about-box { border: none; border-bottom: 2px solid #eeeeee;}
    .about, .about .aui-list-view { background: #fff3cc;}
    .about-title { padding: 10px;}
    .about-image  img { width: 100%; max-height: 180px;}
    .about-content { font-size: 14px; color: #8f8f94; padding: 5px 0;}
    .helper-topic { background: #95dbe5; color: #ffffff;}
    .topic-title { padding: 10px; font-size: 1.2em;}
    .helper-topic p { padding: 5px 10px; color: #ffffff;}
    .aui-list-body { font-size: 1.2em;}
    .aui-line-x:after {
		border-bottom: 1px solid #fff;
	}
	</style>
 </head>
 <body>
 	<header class="aui-bar aui-bar-nav bar-bgcolor" id="aui-header">
		<a class="aui-pull-left small-avatar" tapmode onclick="back()">
			<span class="aui-iconfont aui-icon-left"></span>
			<img src="image/a1.jpeg" class="avatar" />
		</a>
		<a class="aui-pull-right">
			<span class="aui-iconfont aui-icon-like"></span>
		</a>
	</header>
 	<section class="aui-content image" style="background:url('image/helper-bg.png') no-repeat ; background-position: center; background-size: cover;">
		<img src="image/a1.jpeg" class="avatar" />
		<div class="helper-name">流浪男</div>
	</section>
	<section class="aui-content aui-padded-10">
		<div class="helper-info">
			<p class="helper-tag">XX企业创始人</p>
			<p class="wantmeet">
				<i class="aui-iconfont aui-icon-timefill"></i> 2天内回复&nbsp;&nbsp;
				<i class="aui-iconfont aui-icon-likefill"></i> 6人想见
			</p>
		</div>
	</section>
	<section class="aui-content aui-card about-box aui-noborder">
		<p class="aui-text-center about-title">关于TA</p>
		<div class="aui-line-x"></div>
		<ul class="aui-list-view">
			<li class="aui-list-view-cell">
                <div class="aui-col-xs-12 about-image">
                    <img src="image/ad1.png">
                </div>
                <div class="aui-col-xs-12 about-content">这里是个性签名内容，几句话介绍自己</div>
            </li>
		</ul>
	</section>
	<section class="aui-content aui-card helper-topic aui-noborder">
		<div class="topic-title">如何快速步入创业浪潮</div>
		<p class='aui-ellipsis-2'>秘籍简单介绍</p>
		<div class="aui-line-x"></div>
        <p class='aui-ellipsis-1'>
        	<i class="aui-iconfont aui-icon-rechargefill"></i>&nbsp;300元/次
        	<i class="aui-iconfont aui-icon-timefill"></i>&nbsp;1小时左右
        </p>
	</section>
 </body>
 <script type="text/javascript" src="../../../script/api.js"></script>
 <script type="text/javascript">
 	function back(){
		api.closeWin({
			name:'helper_show_win'
		});
	}
 	// window.onscroll = function(){
 	// 	if(document.body.scrollTop>=60){
 	// 		$api.addCls($api.dom("#aui-header img.avatar"),'show');
 	// 		$api.removeCls($api.dom("#aui-header img.avatar"),'hide');

 	// 		$api.removeCls($api.byId('aui-header'),"nowhite");
 	// 		$api.addCls($api.byId('aui-header'),"white");
 	// 	}else{
 	// 		if($api.dom(".white")){
 	// 			$api.addCls($api.dom("#aui-header img.avatar"),'hide');
 	// 			$api.removeCls($api.dom("#aui-header img.avatar"),'show');

 	// 			$api.addCls($api.byId('aui-header'),"nowhite");
 	// 			$api.removeCls($api.byId('aui-header'),"white");
 	// 		}
 			
 	// 	}
 	// }
    var startX,
        startY,
        i=1;
    $api.addEvt($api.dom("body"), 'touchstart', function(event){
        
    });

    $api.addEvt($api.dom("body"), 'touchmove', function(event){
        // console.log(event);
        // console.log(document.body.scrollTop);
        // console.log(event.touches[0].pageY);
        i++;
        if(document.body.scrollTop>=40){
            var opacity = i/10;
            if(opacity>=1){
                opacity = 1;
            }
            $api.addCls($api.byId('aui-header'),"white");
            $api.removeCls($api.byId('aui-header'),"nowhite");
            $api.css($api.byId('aui-header'),"opacity: "+opacity+";");
            $api.addCls($api.dom("#aui-header img.avatar"),'show');
            $api.removeCls($api.dom("#aui-header img.avatar"),'hide');
        }else{
            if($api.dom(".white")){
                $api.addCls($api.dom("#aui-header img.avatar"),'hide');
                $api.removeCls($api.dom("#aui-header img.avatar"),'show');
                // $api.addCls($api.byId('aui-header'),"nowhite");
                $api.removeCls($api.byId('aui-header'),"white");
                $api.css($api.byId('aui-header'),"opacity: 0;");
            }
            
        }
    });
 	apiready = function(){
 	    api.parseTapmode();
		var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
 	}
 </script>
 </html>